<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" />

    <div class="login">
        <van-field 
        v-model="user_acc" 
        clearable label="邮箱" 
        left-icon="envelop-o" 
        placeholder="xxxx@qq.com" />
        <van-button block round color="#FF2A43" @click="sendEmailFn">发送验证码</van-button>
    </div>

    <van-loading v-if="isShowLoading" size="24px" vertical>发送中...</van-loading>

</template>
<script lang="ts" setup>

import { ref } from 'vue'
// import { showDialog } from 'vant'
import { showToast } from 'vant'
// 导入发送邮箱验证码的接口
import { sendEmailFunc } from '../api/index'
import { useRouter } from 'vue-router'
const $router = useRouter();
const onClickLeft = () => {
    $router.back();
}
// 定义变量记录输入框的值
let user_acc = ref('')
let repx = /\w{5,}@qq\.com$/
let d: any = null;
let isShowLoading = ref(false);
// 发送邮箱验证码
const sendEmailFn = async () => {
    let email = user_acc.value
    if (email.length == 0) {
        showToast('输入框不能为空。');
        return;
    }

    if (repx.test(email)) {
        // 加载提示
        isShowLoading.value = true
        // 格式正确 调用发送邮箱验证码的接口
        await sendEmailFunc({ email })
            .then(
                (content: any) => {
                    // console.log('1.0', content)
                    if(content.code == 200){
                        // 发送成功 跳转下一个页面
                        d = setTimeout(()=>{
                            $router.push({
                                path: '/email_login',
                                query: {
                                    email
                                }
                            })
                            clearTimeout(d);
                        },300)
                        // 参数不显示在URL
                        // $router.push({
                        //     name: 'email',
                        //     params: {
                        //         email
                        //     }
                        // })
                    }
                    // 提示
                    showToast(content.msg);
                },
                err=> {
                    console.log('2.0',err);
                }
            )

        // 隐藏提示
        isShowLoading.value = false
    }
    else {
        // 不正确
        // showDialog({
        //     title: '提示',
        //     message: '邮箱格式不正确。',
        // })
        showToast('邮箱格式不正确。');
    }
}
</script>

<style lang="less">
@import '@/static/less/common.less';

:root {
    --van-nav-bar-icon-color: #000;
    /* --aaa: red; */
}

.van-cell {
    border-bottom: 1px solid #ccc;
}

.login {
    box-sizing: border-box;
    padding: @pad;
    height: 10.6667rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
</style>